<template>
  <div class="content">
    <div class="siyuDiv">
      <TitleVue :name="'降雨预报'" />
      <div class="modelOne">
        <div v-for="item in weaList" :key="item.id" class="day-wea-item">
          <div class="date flex-column">
            <span>周{{ item.day }}</span>
            <span>{{ item.date }}</span>
          </div>
          <div class="wea flex-column">
            <i style="font-size: 30px" :class="`qi-${item.iconDay}-fill`"></i>
            <span>{{ item.textDay }}</span>
          </div>
          <!-- <div class="temp flex-column">
            <span>{{ item.tempMin }}℃</span>
            <span>{{ item.tempMax }}℃</span>
          </div> -->
        </div>
      </div>
      <div class="wdEcharts">
        <div id="mychart" ref="chartRef"></div>
      </div>
    </div>

    <div class="yxgkDiv">
      <TitleVue :name="'运行概况'" />
      <div class="yxgkContent">
        <div class="itemDiv" v-for="(item, index) in yxgkList" :key="index">
          <div class="firstDiv">
            <div>
              <i class="el-icon-help"></i>
              <span> {{ item.name }}</span>
            </div>
            <div>
              <span>{{ index != 0 ? '已落实：' : '已完成：' }}{{ item.finish }}（座）</span>
              <span>{{ item.percentage }}%</span>
            </div>
          </div>
          <div class="secondDiv">
            <el-progress :percentage="item.percentage" :show-text="false"></el-progress>
          </div>
        </div>
      </div>
    </div>

    <div class="yjxxDiv">
      <TitleVue :name="'预警信息'" />
      <div class="contentDiv">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="'水情预警（' + sqyjzList.length + '）'" name="first">
            <InfiniteScroll :height="'100%'" :list="sqyjzList" :ths="yjThs" :xhflex="2" />
          </el-tab-pane>
          <el-tab-pane :label="'工情预警（' + gqyjzList.length + '）'" name="second">
            <InfiniteScroll :height="'100%'" :list="gqyjzList" :ths="gqyjThs" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import InfiniteScroll from '@/components/infiniteScroll/index.vue'
import * as echarts from 'echarts'
export default {
  name: 'XjRight',
  components: {
    TitleVue,
    InfiniteScroll
  },
  data() {
    return {
      weaList: [
        {
          id: 1,
          day: '一',
          date: '03-27',
          iconDay: '101',
          textDay: '多云',
          tempMin: 22,
          tempMax: 32
        },
        {
          id: 2,
          day: '二',
          iconDay: '100',
          date: '03-28',
          textDay: '晴',
          tempMin: 23,
          tempMax: 28
        },
        {
          id: 3,
          day: '三',
          iconDay: '102',
          date: '03-29',
          textDay: '少云',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 4,
          day: '四',
          date: '03-30',
          iconDay: '104',
          textDay: '阴',
          tempMin: 23,
          tempMax: 29
        },
        {
          id: 5,
          day: '五',
          date: '03-30',
          iconDay: '100',
          textDay: '晴',
          tempMin: 23,
          tempMax: 33
        },
        {
          id: 6,
          day: '六',
          date: '03-30',
          iconDay: '305',
          textDay: '小雨',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 7,
          day: '日',
          date: '03-30',
          iconDay: '101',
          textDay: '多云',
          tempMin: 23,
          tempMax: 30
        }
      ],
      yxgkList: [
        {
          name: '安全鉴定',
          finish: 3,
          percentage: 75
        },
        {
          name: '应急预案落实情况',
          finish: 4,
          percentage: 100
        },
        {
          name: '落实专业化管护',
          finish: 4,
          percentage: 100
        },
        {
          name: '监督检查整改进度',
          finish: 3,
          percentage: 75
        },
        {
          name: '调度规程落实情况',
          finish: 2,
          percentage: 50
        }
      ],
      activeName: 'first',
      sqyjzList: [
        {
          name: '蔡庄水库',
          value: '雨量:60mm(12h)',
          yjval: '雨量:50mm(12h)',
          time: '05-16 12:00'
        },
        {
          name: '蔡庄水库',
          value: '水位:1108.23m',
          yjval: '水位:1108m',
          time: '05-16 12:00'
        },
        {
          name: '蔡庄水库',
          value: '雨量:68mm(12h)',
          yjval: '雨量:50mm(12h)',
          time: '05-15 12:00'
        }
      ],
      yjThs: [
        { name: '水库名称', flex: 3, isCenter: true, property: 'name', isHighlight: false },
        { name: '预警内容', flex: 6, isCenter: true, property: 'value', isHighlight: false },
        { name: '预警值', flex: 6, isCenter: true, property: 'yjval', isHighlight: false },
        { name: '时间', flex: 3, isCenter: true, property: 'time', isHighlight: false }
      ],
      gqyjThs: [
        { name: '水库名称', flex: 4, isCenter: true, property: 'name', isHighlight: false },
        { name: '预警内容', flex: 6, isCenter: true, property: 'value', isHighlight: false },
        { name: '时间', flex: 4, isCenter: true, property: 'time', isHighlight: false }
      ],
      gqyjzList: [
        {
          name: '蔡庄水库',
          value: '位移X:5mm',
          time: '05-16 12:00'
        },
        {
          name: '蔡庄水库',
          value: '渗压1092.3m',
          time: '05-16 12:00'
        },
        {
          name: '蔡庄水库',
          value: '位移Y:-10mm',
          time: '05-15 12:00'
        },
        {
          name: '蔡庄水库',
          value: '渗压1092.35m',
          time: '05-15 12:00'
        }
      ]
    }
  },
  mounted() {
    this.initChart()
    this.sqyjzList.forEach((item, index) => {
      item.time = this.deleteMinutes(new Date(), (index + 1) * 0.5)
    })
    this.gqyjzList.forEach((item, index) => {
      item.time = this.deleteMinutes(new Date(), (index + 1) * 1)
    })
  },

  methods: {
    deleteMinutes(date, day) {
      var time = null
      time = this.parseTime(new Date(date.getTime() - day * 60000 * 60 * 24)).substr(5, 11)
      return time
    },
    initChart() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(document.getElementById('mychart'))
      var minList = this.weaList.map((item) => {
        return item.tempMin
      })
      var min = Math.min(...minList)
      var maxList = this.weaList.map((item) => {
        return item.tempMax
      })
      var max = Math.max(...maxList)
      console.log(min, max)

      const options = {
        // 设置内边距
        grid: {
          bottom: 18,
          top: 18,
          left: '3%',
          right: '3%'
        },
        xAxis: {
          type: 'category',
          data: this.weaList.map((item) => item.day),
          // 取消刻度线
          axisTick: {
            show: false
          },
          // 取消x轴
          axisLine: {
            show: false
          },
          // 取消坐标值
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          // 设置y轴范围
          min: max + 1,
          max: min - 2
        },
        series: [
          {
            data: this.weaList.map((item) => item.tempMin),
            type: 'line',
            showSymbol: true,
            // 显示温度
            label: {
              show: true,
              position: 'bottom',
              formatter: '{c} °C',
              color: '#fff'
            },
            lineStyle: {
              color: '#4e7795'
            },
            itemStyle: {
              color: '#4e7795'
            }
          },
          {
            data: this.weaList.map((item) => item.tempMax),
            type: 'line',
            showSymbol: true,
            label: {
              show: true,
              position: 'top',
              formatter: '{c} °C',
              color: '#fff'
            },
            lineStyle: {
              color: '#4e7795'
            },

            itemStyle: {
              color: '#4e7795'
            }
          }
        ]
      }
      // 设置图表配置项
      this.myChart.setOption(options)
    },
    intoPage() {
      this.$router.push('/zlIndex')
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .siyuDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .modelOne {
      width: 100%;
      height: auto;
      padding: 0vh 1.2vw 1vh;
      box-sizing: border-box;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.5vh;
      color: #fff;
      display: flex;
      column-gap: 1vh;
      .day-wea-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        flex: 1;
        z-index: 100;
        &.active {
          border: 2px solid #184f71;
        }
      }
    }
    .wdEcharts {
      width: 100%;
      height: 8vh;
      #mychart {
        width: 100%;
        height: 100%;
      }
    }
  }
  .yxgkDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .yxgkContent {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .itemDiv {
        padding:0.8vh 1vh;
        box-sizing: border-box;
        .firstDiv {
          display: flex;
          justify-content: space-between;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #ccc;
          .el-icon-help {
            font-size: 1.2vh;
            margin-right: 5px;
            position: relative;
            top: -2px;
          }
          div:nth-child(2) {
            span {
              margin-left: 2vh;
            }
          }
        }
        .secondDiv {
          padding-left: 1vh;
          box-sizing: border-box;
          ::v-deep .el-progress-bar__outer {
            border-radius: 0px;
            background: #4d6e81 !important;
            .el-progress-bar__inner {
              border-radius: 0px;
              background-image: linear-gradient(to right, #234558, #4c7cc8, #fff);
            }
          }
        }
      }
    }
  }
  .yjxxDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .contentDiv {
      flex: 1;
      padding: 0 2vh 1vh;
      box-sizing: border-box;
      display: flex;
      overflow: auto;
      ::v-deep .el-tabs {
        flex: 1;
        display: flex;
        flex-direction: column;
        .el-tabs__item {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #fff;
        }
        .el-tabs__content {
          flex: 1;
          width: 100%;
          height: 100%;
          overflow: auto;
        }
        .el-tabs__content::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
</style>
